<template>
	<view class="commentary">
		<text>评论区</text>
		<text>共30条评论</text>
		<!-- 发布评论框 -->
		<view class="Commentary1">
			<input class="uni-input" @input="onKeyInput" placeholder="发一条友善的评论" />
			<button @click="SendMessage">发送</button>
		</view>
		<view class="Commentary" v-if="isInput">
			<input class="uni-input" @input="onKeyInput" placeholder="发一条友善的评论" v-model="PutData.message" />
			<button @click="SendMessage">发送</button>
		</view>
		<!-- 一级评论(包括二级评论) -->
		<view class="one-commentary" v-for="item in OneDataList " :key="item.count">
			<!-- 头像与用户名 -->
			<view class="top-avtor">
				<image :src="item.root.member.avatar">
				</image>
				<text>{{item.root.member.username}}</text>
			</view>
			<!-- 评论与评论时间 -->
			<view class="comtext-time">
				<text>{{item.root.content.message}}</text>
				<view>
					<text style="color:#797979;">{{item.root.createTime.replace("T"," ")}}</text>
					<text @click="replymessage(item)">回复</text>
				</view>

			</view>
			<!-- 回复，二级及以下评论 -->
			<view class="two-comment" v-for="reply in item.replies" :key="reply.id">
				<view>
					<image :src="reply.member.avatar">
					</image>
					<text class="two-tex">{{reply.member.username}}</text>
					<view class="mess">
						<view v-if="reply.content.message" class="mess-top">

							<text class="first-te">{{getMssage(reply.content.message)}}</text>
							<text class="two-te">{{getmesstwo(reply.content.message)}}</text>
						</view>
						</text>
					</view>

				</view>

				<view class="time">
					<text v-if="reply.createTime">{{ reply.createTime.replace("T"," ")}}</text>
					<text @click="tworeplymess(reply,item)">回复</text>
				</view>
			</view>
			<!-- 分页器及其展开回复 -->
			<view class="pagtion" v-if="item.count > 10">
				<uni-section padding>
					<uni-pagination :show-icon="true" :total="item.count / 10" title="标题文字" :current="ComData.current"
						@change="change" />
				</uni-section>
			</view>
			<view class="reply-count" v-if="item.count > 10">
				<text>---展开{{item.count}}条回复</text>
				<view class="arrow">
					<image
						src="https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/20638107-bec4-40e6-b264-29bbc11a83f2image/png">
					</image>
				</view>
			</view>
			<!--  最后的那根线-->
			<view class="last-line">

			</view>


		</view>

		<!--  -->
	</view>
</template>

<script>
	export default {
		name: "Commentary",
		data() {
			return {
				ComData: {
					articleId: undefined, //文章id
					current: 1, //默认第一页
					size: 10, //默认6条数据,

				},
				PutData: {
					articleId: undefined,
					message: '',
					parent: 0, //默认是0
					root: 0 //默认是一级评论
				}, //发布评论的数据集合
				oldmess: '',
				OneDataList: [],
				isShow: false,
				total: undefined, //分页器总页数，每一页默认只展示10条数据
				isInput: false
			};
		},
		props: ['Id', 'isshow'],
		mounted() {
			this.$nextTick(() => {
				this.ComData.articleId = parseInt(this.$props.Id);
				this.PutData.articleId = parseInt(this.$props.Id);
				this.GetOneCommenary(this.ComData);
			})
		},
		methods: {
			//拿到一级评论
			async GetOneCommenary(data) {
				let res = await this.$store.dispatch("GetAllFirstCommentary", data);
				if (res === 'ok') {
					this.OneDataList = this.$store.state.Commentary.CommentData;
					console.log(this.OneDataList);
				}
			},
			//第一句
			getMssage(mess) {
				// console.log('22', mess.includes("@"))
				if (mess.includes("@") == true) {
					const newmess = mess.split(":");
					// console.log('能够划分的', newmess)
					return newmess[0];
				} else {
					// console.log('不包含')
					this.isShow = true;
					return;
				}

			},
			//第二句
			getmesstwo(mess) {
				if (mess.includes("@") == true) {
					const newmess = mess.split(":");
					// console.log('能够划分的1', newmess)
					return newmess[1];
				} else {
					this.isShow = true;
					return mess;
				}
			},
			//分页器
			change(e) {
				if (e.type == prev && e.current != 1) {
					this.ComData.current -= 1;
					this.GetOneCommenary(this.ComData)
				} else if (e.type == next) {
					this.ComData.current += 1;
					this.GetOneCommenary(this.ComData);
				}
			},
			//取消评论框
			canselInput() {

				// this.isInput = !this.isInput;
				this.oldmess = '';
				this.PutData = {
					articleId: undefined,
					message: '',
					parent: 0, //默认是0
					root: 0 //默认是一级评论
				}
			},
			//保存评论信息
			onKeyInput(event) {
				this.PutData.message = event.target.value;
			},
			//发送评论
			async SendMessage() {
				if (this.PutData.message != ' ') {
					this.oldmess += this.PutData.message;
					this.PutData.message = this.oldmess;
					let res = await this.$store.dispatch("PutCommentary", this.PutData)
					// this.PutData.message = ''
					if (res == 'ok') {
						this.GetOneCommenary(this.ComData);
						this.isInput = false
						this.PutData.message = ''
						this.oldmess = ''
					}
				} else {
					return;
				}

			},
			//点击回复评论框出现
			replymessage(data) {
				this.isInput = true;
				// console.log(data)
				console.log("回复一级评论")
				this.PutData.parent = data.root.id;
				this.PutData.root = data.root.id;
				this.PutData.replyedId = data.root.replyId;
				console.log(this.PutData);
			},
			tworeplymess(data, item) {
				this.isInput = true;
				console.log("回复二级")
				// console.log(data);
				// console.log(item)
				this.PutData.parent = data.id;
				this.PutData.root = item.root.id;
				this.PutData.replyedId = data.replyId;
				if (data.parent != 0) {
					this.oldmess = `回复 @${data.member.username}:`;
				}
				console.log(this.PutData);
			}
		},


	}
</script>

<style lang="scss">
	.commentary {
		width: 750rpx;
		min-height: 200rpx;
		height: auto;
		padding-bottom: 50rpx;

		// 
		.Commentary1 {

			z-index: 111;
			display: flex;
			margin-top: 30rpx;
			margin-bottom: 40rpx;

			input {
				background-color: #f4f4f4;
				width: 500rpx;
				height: 80rpx;
				padding-left: 20rpx;
				border-radius: 15rpx;
			}

			button {
				width: 200rpx;
				height: 80rpx;
				border: none;
				font-size: 30rpx;
				text-align: center;
				line-height: 80rpx;
				color: #797979;
				border-radius: 15rpx;

			}
		}

		.Commentary {
			position: fixed;
			bottom: 20rpx;
			left: 20rpx;
			z-index: 111;
			display: flex;
			margin-top: 30rpx;

			input {
				background-color: #ececec;
				width: 500rpx;
				height: 80rpx;
				padding-left: 20rpx;
				border-radius: 15rpx;
			}

			button {
				width: 200rpx;
				height: 80rpx;
				border: none;
				font-size: 30rpx;
				text-align: center;
				line-height: 80rpx;
				color: #797979;

			}
		}

		// 评论展示区
		.one-commentary {
			width: 100%;
			height: auto;
			margin-bottom: 50rpx;

			// height: 100vh;
			// overflow-y: auto;

			// 
			.top-avtor {
				width: 700rpx;
				height: 50rpx;

				display: flex;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					margin-left: 20rpx;

				}

			}

			// 
			.comtext-time {
				width: 650rpx;
				margin-left: 120rpx;
				display: flex;
				flex-direction: column;

				text {
					margin-bottom: 20rpx;

					&:first-child {
						width: 100%;
						height: auto;
						color: black;
						margin-top: 10rpx;
					}

					// &:last-child {
					// 	color: rgb(158, 158, 158);
					// }
				}

				view {
					display: flex;

					text {
						&:first-child {
							width: auto;
							height: auto;
							color: black;
							margin-top: 10rpx;
							margin-right: 30rpx;
						}

						&:last-child {
							margin-top: 10rpx;
							color: rgb(158, 158, 158);
						}
					}
				}
			}

			// 二级评论
			.two-comment {
				width: 650rpx;
				margin-left: 120rpx;
				margin-bottom: 30rpx;

				view {
					&:first-child {
						width: 100%;
						height: auto;
						display: flex;
						margin-bottom: 40rpx;
						flex-wrap: wrap;

						image {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							margin-right: 30rpx;
						}

						.two-tex {
							width: auto;
							margin-right: 30rpx;
							font-size: 30rpx;
						}

						.mess {
							font-size: 30rpx;
							margin-right: 10rpx;
							color: black;

							.mess-top {
								height: auto;
								text-align: justify;

								.first-te {
									color: rgb(66, 147, 199);
								}

								.two-te {
									color: black;
								}
							}


						}
					}

					//第二个
					&:last-child {
						color: rgb(158, 158, 158);

						text {
							&:first-child {
								margin-right: 30rpx;
							}
						}
					}
				}
			}

			// 分页器及其他
			.pagtion {
				width: 500rpx;
				margin: 0 auto;
			}

			// 
			.reply-count {
				width: 750rpx;
				margin-top: 25rpx;
				margin-left: 80rpx;
				display: flex;

				text {
					padding-right: 30rpx;
				}

				.arrow {
					width: 30rpx;
					height: 30rpx;
					margin-top: 7rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}
	}
</style>
